<template>
  <div class="example">
    <!-- your template code -->
    <p>Data: {{ data }}</p>
    <p>Formatted Date: {{ formattedDate }}</p>
    <p v-if="userData">User Name: {{ userData.name }}</p>
    <p>Formatted Date: {{ formattedDate }}</p>
    <button @click="fetchUserData">Fetch User Data</button>
  </div>
</template>
  
  <script>
import { mapState, mapActions } from "vuex";
import { fetchData } from "@/api"; // @ 表示 src 目录的别名
import { formatDate } from "@/utils/helper";
export default {
  name: "ExampleComponent",
  data() {
    return {
      data: null,
      formattedDate: null,
    };
  },
  methods: {
    ...mapActions(['fetchUserData']),
    formatCurrentDate() {
      this.formattedDate = formatDate(new Date());
    }
  },
  computed: {
    ...mapState(['userData'])
  },
  async mounted() {
    try {
      this.data = await fetchData();
      this.formattedDate = formatDate(new Date());
    } catch (error) {
      console.error("Error fetching data or formatting date:", error);
    }
  },
  // your component logic
};
</script>
  
  <style lang="scss">
// scoped表示这段样式仅对当前组件有效
.example {
  background-color: $primary-color;
  color: $secondary-color;

  &:hover {
    background-color: darken($primary-color, 10%);
  }
}
</style>
  